﻿@model Olemas.ViewModels.CommentsViewModel

<script type="text/javascript" src="~/Scripts/Shared/date.format.js"></script>

<div class="addCommentDiv">
    @using (Html.BeginForm("AddComment", "Comments", FormMethod.Post, new { name = "commentForm", id = "commentForm" }))
    {
        <fieldset>
            <legend>Lisa kommentaar</legend>
            <p>
                @Html.ValidationMessageFor(x => x.CommentModel.UserName)
                @Html.LabelFor(x => x.CommentModel.UserName)
                @Html.TextBoxFor(x => x.CommentModel.UserName, new { id = "commentAuthorTextBox", maxlength = "20", placeholder = "Sinu nimi.." })
                <a id="commentSubmitButton" class="commentSubmitButton">Lisa</a>
                <img id="commentsLoadingImage" style="display: none" class="commentsLoadingImage" src="~/Content/Site_Images/loading.gif" alt="oota.." />

            </p>

            <p>
                @Html.ValidationMessageFor(x => x.CommentModel.CommentText)
                @Html.LabelFor(x => x.CommentModel.CommentText)
                @Html.TextAreaFor(x => x.CommentModel.CommentText, new { id = "commentTextBox", maxlength = "350", rows = 2, placeholder = "Kirjuta kommentaar siia.." })
            </p>
            <p>
                @Html.HiddenFor(x => x.CommentModel.ItemType, new { Value = Model.CommentItemType })
                @Html.HiddenFor(x => x.CommentModel.ItemId, new { Value = Model.CommentItemId })
            </p>
            <p>
                <input type="hidden" name="submitButton" value="Lisa" />
            </p>
        </fieldset>
    }
</div>

<div id="commentsMain" class="commentsMain">
    @Html.Partial("_DisplayedComments")
</div>



<img class="loadingImage" style="display: none" src="~/Content/Site_Images/newLoading.gif" alt="oota.." />

@Html.Hidden("NumberOfPages", Model.NumberOfPages, new { id = "NumberOfPages" })
@Html.Hidden("CurrentPage", Model.CurrentPage, new { id = "CurrentPage" })

<script type="text/javascript">
    $(document).ready(function () {
        //< --------------------Page variables ------------------------->
        Olemas.NextPage = parseInt($("#CurrentPage").val()) + 1;
        Olemas.CommentItemId = parseInt($("#CommentModel_ItemId").val());
        Olemas.CommentItemTypeId = parseInt($("#CommentModel_ItemType").val());
        Olemas.DivToUpdate = '#commentsMain';
        Olemas.ActionLink = '@Url.Action("Comments", "Comments")';
        Olemas.Page = "comments";
        //< ------------------------------------------------------------>


        //< --------------------Page functions-------------------------->
        Olemas.CheckPages();
        //< ----------------------------------------------------------->


        //< --------------------Events -------------------------------->
        // submit form when link is clicked.
        $('.commentSubmitButton').click(function (e) {
            $('#commentForm').submit();
        });
        
        $('#commentForm').submit(function (e) {
            e.preventDefault();
            if ($(this).valid()) {
                Olemas.AddComment(this.method, this.action, Olemas.GetCommentData($(this).serializeArray()));
            }
        });
        
        // expand comment textbox on focus
        $('#commentTextBox').focus(function () {
            $(this).animate({ height: "100px" }, "slow");
        });
        
        $(document).on("click", "#loadNextComments", function () {
            if ($(this).text() == "↑ Kõik vaadatud. Tagasi üles ↑") {
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
            if (Olemas.NextPage <= Olemas.MaxPage) {
                Olemas.LoadMoreComments();
            }
        });

        $(window).scroll(
            $.throttle(800, Olemas.ScrollLoad));
        //< ------------------------------------------------------------>
    });
</script>


